<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹灯</title>

    <style type="text/css">
        body {
            background: #050901;
        }

        .light {
            border-radius: 5px;
            width: 50%;
            margin-left: 25%;
            position: relative; /*相对定位*/
            padding: 10px 15px; /*内边距*/
            text-align: center; /*文字水平居中*/
            font-family: "新宋体"; /*字体*/
            font-size: 40px; /*字体大小*/
            text-transform: uppercase; /*所有字母全部转大写显示*/
            transition: all 2s ease 0s; /*设置鼠标悬停过渡动画*/
            letter-spacing: 16px; /*设置字符左右的间距*/
            cursor: pointer; /*设置鼠标形状为手形*/
            overflow: hidden; /*溢出的内容进行隐藏*/

            background-color: #03e9f4;/*背景色*/
            color: #FFF;/*字体颜色*/
            font-weight: bold;/*加粗*/
            box-shadow: 0 0 200px 30px #03e9f4;/*为元素设置阴影效果*/
        }

        /*设置鼠标悬停的样式*/
        .light:hover {
            background-color: #f3e8e7;/*背景色*/
            color: #0b0b0b;/*字体颜色*/
            box-shadow: 0 0 200px 30px #f3e8e7;/*为元素设置阴影效果*/
        }

        .light div {
            position: absolute;/*绝对定位*/
        }

        /*上边线*/
        .light div:nth-child(1) {
            width: 100%;
            height: 4px;
            top: 0;
            left: -100%;
            background: linear-gradient(to right, transparent, #f60c0c);
            animation: animate1 1s linear infinite;
        }

        /*右边线*/
        .light div:nth-child(2) {
            width: 4px;
            height: 100%;
            top: -100%;
            right: 0;
            background: linear-gradient(to bottom, transparent, #f60c0c);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }

        /*下边线*/
        .light div:nth-child(3) {
            width: 100%;
            height: 4px;
            bottom: 0;
            right: -100%;
            background: linear-gradient(to left, transparent, #f60c0c);
            animation: animate3 1s linear infinite;
            animation-delay: 0.5s;
        }

        /*左边线*/
        .light div:nth-child(4) {
            width: 4px;
            height: 100%;
            bottom: -100%;
            left: 0;
            background: linear-gradient(to top, transparent, #f60c0c);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }

        /*动画效果*/
        @keyframes animate1 {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 100%;
            }
        }

        @keyframes animate2 {
            0% {
                top: -100%;
            }
            50%, 100% {
                top: 100%;
            }
        }

        @keyframes animate3 {
            0% {
                right: -100%;
            }
            50%, 100% {
                right: 100%;
            }
        }

        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
            50%, 100% {
                bottom: 100%;
            }
        }
    </style>

</head>
<body>

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    蚩尤后裔·CyhY
</div>

</body>
</html>